<template>
	<div>
		<!--工具条-->
		<div name="searchColums">
			<el-form :inline="true" :model="filters" size="small" ref="filters" class="searchForm">
				<el-form-item class="el-form-item" label="费用类型">
					<el-select size="small" v-model="filters.feeType" clearable placeholder="请选择">
						<el-option v-for="item in feeTypeOptions" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item class="el-form-item" label="缴费时间">
					<el-date-picker v-model="filters.payDateBegin" type="date" value-format="yyyy-MM-dd" placeholder="选择日期时间"></el-date-picker>
				</el-form-item>
				<el-form-item class="el-form-item" label="至">
					<el-date-picker v-model="filters.payDateEnd" type="date" value-format="yyyy-MM-dd" placeholder="选择日期时间"></el-date-picker>
				</el-form-item>
				<el-form-item class="el-form-item" style="width: 100%;" label="统计项">
					<el-checkbox-group v-model="filters.items" style="display: inline-block;">
						<el-checkbox label="buildingId,buildingName" name="items">楼宇</el-checkbox>
						<el-checkbox label="unitId,unitName" name="items">单元</el-checkbox>
						<el-checkbox label="house_id,houseName" name="items">房屋</el-checkbox>
						<el-checkbox label="fee_type" name="items">类型</el-checkbox>
					</el-checkbox-group>
					<el-radio-group v-model="filters.unit">
						<el-radio label="year" style="margin-left: 30px;">年</el-radio>
						<el-radio label="month">月</el-radio>
						<el-radio label="day">日</el-radio>
					</el-radio-group>
				</el-form-item>
				<span class="bth_search">
					<el-form-item>
			    		<el-button type="success" icon="el-icon-search" v-on:click="getDataGrid(true)">统计</el-button>
			    	</el-form-item>
			    	<el-form-item>
			    		<el-button icon="el-icon-refresh" @click="resetSearchForm('filters')">重置</el-button>
			    	</el-form-item>
				</span>
			</el-form>
		</div>

		<!--列表-->
		<el-table :data="gridDatas" id="dataGrid" empty-text=" " border stripe size="mini" :header-row-class-name="headStyle" highlight-current-row v-loading="listLoading" :row-class-name="tableRowClassName" @sort-change="handleSortChange" @selection-change="selsChange" style="width: 100%;">
			<el-table-column type="selection" width="45"></el-table-column>
			<el-table-column prop="index" :formatter="index_formatter" label="序号" width="60"></el-table-column>
			<el-table-column prop="communityName" label="小区名称" width="160" show-overflow-tooltip></el-table-column>
			<el-table-column prop="buildingName" label="楼宇名称" v-if="buildingVisible" width="120" show-overflow-tooltip></el-table-column>
			<el-table-column prop="unitName" label="单元名称" v-if="unitVisible" width="120" show-overflow-tooltip></el-table-column>
			<el-table-column prop="houseName" label="房屋名称" v-if="houseVisible" width="120" show-overflow-tooltip></el-table-column>
			<el-table-column prop="feeType" label="费用类型" v-if="feeTypeVisible" width="120" show-overflow-tooltip></el-table-column>
			<el-table-column prop="payDate" label="缴费时间" width="120" show-overflow-tooltip></el-table-column>
			<el-table-column prop="feeNumber" label="缴费金额(万元)" width="140" show-overflow-tooltip></el-table-column>
			<el-table-column></el-table-column>
		</el-table>
		<!--工具条-->
		<el-col :span="24" class="toolbar" id="pageDiv">
			<el-pagination small background @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total" layout="total,sizes, prev, pager, next" style="float:right;"></el-pagination>
		</el-col>
	</div>
</template>
<script>
	import { getToken, setToken, removeToken } from '@/util/auth'
	import request from '@/router/axios'
	export default {
		name: 'suggestApprove',
		data() {
			return {
				//单元过滤条件
				filters: {
					feeType: '',
					payDateEnd: '',
					payDateBegin: '',
					unit: 'day',
					items: []
				},
				url: {

					//单元数据
					list: "/admin/paymentRecord/feeStatistics"

				},
				gridDatas: [],
				feeTypeOptions: [],
				sort: {
					sort: 'sort',
					order: 'asc'
				},
				total: 0,
				page: 1,
				pageSize: 10,
				listLoading: false,
				sels: [],
				buildingVisible: false,
				unitVisible: false,
				houseVisible:false,
				feeTypeVisible:false
			}
		},
		methods: {
			//初始化数据字典
			initDictsData: function() {
				request.get("/admin/dict/type/fee_type").then((res) => {
					if(res.status === 200) {
						this.feeTypeOptions = res.data;
					}
				});

			},
			handleSortChange(sort) {
				this.sort = {
					sort: sort.prop,
					order: sort.order == 'ascending' ? 'asc' : 'desc'
				};
				this.getDataGrid();
			},
			tableRowClassName(row, index) {
				//把每一行的索引放进row
				row.index = row.rowIndex
			},
			headStyle({
				row,
				rowIndex
			}) {
				return "table_head_style";
			},
			index_formatter: function(row, column, cellValue, index) {
				//放回索引值
				return(this.pageSize * (this.page - 1) + 1 + index);
			},
			handleCurrentChange(val) {
				this.page = val;
				this.getDataGrid();
			},
			handleSizeChange(val) {
				this.pageSize = val;
				this.page = 1;
				this.getDataGrid();
			},
			resetSearchForm(formName) {
				this.filters = {
					feeType: '',
					payDateEnd: '',
					payDateBegin: '',
					unit: 'day',
					items: []
				}
			},
			selsChange: function(sels) {
				this.sels = sels;
			},
			//获取单元列表数据
			getDataGrid(flag) {
				//根据统计维度，显隐列头
				this.buildingVisible = (this.filters.items.toString().indexOf("buildingId") >= 0);
				this.unitVisible = (this.filters.items.toString().indexOf("unitId") >= 0);
				this.feeTypeVisible = (this.filters.items.toString().indexOf("fee_type") >= 0);
				this.houseVisible = (this.filters.items.toString().indexOf("house_id") >= 0);
				if(flag){
      				this.page = 1;
      			}
				//获取当前树节点选中小区
				let para = {
					params: {
						page: this.page,
						limit: this.pageSize,
						//排序
						orderByField: this.sort.sort,
						isAsc: this.sort.order,
						payDateBegin: this.filters.payDateBegin,
						payDateEnd: this.filters.payDateEnd,
						unit:this.filters.unit,
						items:this.filters.items.toString(),
						feeType: this.filters.feeType
					}
				};
				this.listLoading = true;
				request.get(this.url.list, para).then((res) => {
					this.total = res.data.total;
					var datas = res.data.records;
					for(var i=0;i<datas.length;i++){
						for(var j=0;j<this.feeTypeOptions.length;j++){
							if(datas[i].feeType==this.feeTypeOptions[j].value){
								datas[i].feeType = this.feeTypeOptions[j].label;
								break;
							}
						}
					}
					this.gridDatas = datas;
					this.listLoading = false;
				});
			}
		},
		mounted() {
			this.getDataGrid();
			this.initDictsData();
		}
	}
</script>